<template>
  <el-upload
    class="upload-demo"
    drag
    :data="dataObj"
    :action="action"
    :headers="uploadHeader"
    :show-file-list="false"
    :on-success="uploadFileSuccess"
    :before-upload="beforeUpload"
    :limit="limit"
    :accept="accept"
    v-loading="loading"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
      将货件单拖到此处，或<em>点击上传</em>
      <br>
      <div class="font-grey mgt10" style="font-size: 13px">只能上传PDF文档、excel表格</div>
    </div>
  </el-upload>
</template>

<script>

import {getToken} from "@/utils/auth";

export default {
  name: "UploadShipment",
  props:{
    action: {
      type: String,
      default: process.env.VUE_APP_BASE_API + '/middleWorkOrder/uploadShipment',
    },
    uploadHeader: {
      type: Object,
      default: function(){
        return {
          Authorization: 'Bearer ' + getToken(),
        }
      }
    },
    limit:{
      type: Number,
      default: 1024 * 3, // 限制大小5m以下
    },
    accept:{
      type: String,
      default: '.pdf,.xlsx',
    },
    file:{
      type: String,
      default: '',
    },
    dataObj: {
      type: Object,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    importData: {
      type: Object,
    },
  },
  data(){
    return {
      fileList: [],
      loading: false,

    }
  },
  methods:{
    // 上传处理
    uploadFileSuccess(res, file) {
      this.loading = false
      this.importData.status = 0
      if(res.error === 0){
        this.$successMessage(res.message)
        this.importData.goodsData = res.info.success
        this.importData.failData = res.info.fail
        this.$emit('uploadShipmentFinish')
      }else{
        this.$errorMessage(res.message)
      }
    },
    beforeUpload(){
      this.loading = true
      this.importData.status = 1;
      return true
    },
  },

}
</script>

<style scoped lang="scss">

.file:hover{
  color: #1890ff;
}
</style>
